<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no">
    <title>Visitor management background</title>
    <script>
    	if(localStorage.getItem("language") == "zh_cn"){
    		document.write("<script type='text/javascript' src='js/zh_cn.js'><\/script>");
    	}else if(localStorage.getItem("language") == "zh_tw"){
    		document.write("<script type='text/javascript' src='js/zh_tw.js'><\/script>");
    	}else{
    		document.write("<script type='text/javascript' src='js/en.js'><\/script>");
    	}
    </script>
		<!--<link rel="stylesheet" href="css/bootstrap.min.css" />-->
    <script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    	function show(data) {
    		$("#list ul li").css("background","transparent");
    		if(data == "kongzhi"){
    			$("#list").css("display","none");
    			$("iframe").attr("src","kongzhi.html");
    			$("iframe").attr("style","margin-left:0px;width:100%;height:"+JSON.stringify($("#details").height()-70)+"px;");
    		}else{
    			$("#list").css("display","block");
    			$("iframe").attr("style","margin-left:149px;width:"+JSON.stringify($("#details").width()-150)+"px;height:"+JSON.stringify($("#details").height()-70)+"px;");
    		}
            if(data == "fangke"){$(".fangke_yufang").css("background","#fff");$("iframe").attr("src","fangke_yufang.html");}
    		if(data == "zizhu"){$(".zizhu_yufang").css("background","#fff");$("iframe").attr("src","zizhu_yufang.html");}
    		if(data == "weihu"){$(".weihu_zuzhi").css("background","#fff");$("iframe").attr("src","weihu_zuzhi.html");}
    		if(data == "baobiao"){$(".baobiao_fangke").css("background","#fff");$("iframe").attr("src","baobiao_fangke.html");}
    		if(data == "xitong"){$(".xitong_fangke").css("background","#fff");$("iframe").attr("src","xitong_fangke.html");} 
    		$("#nav li").css("background","transparent");
    		$("."+data).css("background","#1f7ed0");
    		$("#list ul").css("display","none");
    		$("#"+data).css("display","block");
    	}
    	function ershow(data){
    		$("#list ul li").css("background","transparent");
    		// if(data == "weihu_fangke"){
    		// 	$("#nav li").css("background","transparent");
    		// 	$(".fangke").css("background","#1f7ed0");
	    	// 	$("#list ul").css("display","none");
	    	// 	$("#fangke").css("display","block");
    		// 	$(".fangke_yufang").css("background","#fff");
    		// 	$("iframe").attr("src","fangke_yufang.html");
    		// 	return false;
    		// }
    		// if(data == "weihu_chengban"){
    		// 	$("#nav li").css("background","transparent");
    		// 	$(".chengban").css("background","#1f7ed0");
	    	// 	$("#list ul").css("display","none");
	    	// 	$("#chengban").css("display","block");
    		// 	$(".chengban_yucheng").css("background","#fff");
    		// 	$("iframe").attr("src","chengban_yucheng.html");
    		// 	return false;
    		// }
    		$("."+data).css("background","#fff");
    		$("iframe").attr("src",data+".html");
    	}
    	$(function () {
    		$("#nav li").css("background","transparent");
    		$(".kongzhi").css("background","#1f7ed0");
    		// $("#list ul").css("display","none");
    		$("#list ul").attr("style","display:none;margin-top:"+$("#body_div").css("height")+";");
    		$("#kongzhi").css("display","block");
    		$("#list ul li").css("background","transparent");
    		// $(".kongzhi_yiban").css("background","#fff");
    		$("#list").attr("style","min-height:"+$("html").height()+"px;");
    		$("#details").attr("style","min-height:"+$("html").css("height")+";");
    		$("iframe").attr("style","margin-left:0px;width:100%;height:"+JSON.stringify($("#details").height()-70)+"px;");
    		$("iframe").attr("src","kongzhi.html");
    		$("#list").css("display","none");
    	})
    </script>
    <style type="text/css">
    	*{margin: 0px;padding: 0px;font-size: 12px;}
    	#nav li,#list li{cursor: pointer;}
		#nav li{float: left;padding: 0px 20px;color: #fff;line-height: 70px;}
		ul li{list-style: none;line-height: 40px;padding-left: 20px;}
		#list{width: 150px;background: #ccc;font-size: 12px;position: absolute;top: 0px;}
		#list ul{width: 150px;margin-top: 70px;position: relative;z-index: 9;}
		#details{width: 100%;font-size: 12px;position: absolute;top: 0px;}
		iframe{width: 100%;height: 100%;margin-left: 149px;border: 0px;margin-top: 70px;}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}
.open>.dropdown-menu {
    display: block;
}
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
    </style>
</head>
<body>
		<div class="dropdown" style="position: fixed;right: 100px;top:20px;z-index: 100;color: #fff;">
			<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" style="background: #03a9f4 ; color: #fff;">
				<script>document.write(language.Language_switching)</script><span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','zh_cn');location.reload()">简体中文</a>
				</li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#" onclick="localStorage.setItem('language','en');location.reload()">English</a>
				</li>
			</ul>
		</div>
		
    <div id="body_div" style="background: #03a9f4;width: 100%;height: 100%;position: relative;z-index: 10;display: flex;flex-wrap: wrap;">
		<ul id="nav" style="float: left;">
			<li style="width: 210px;font-size: 26px;margin-right: 100px;"><script>document.write(language.guanli)</script></li>
			<li class="kongzhi" onclick="show('kongzhi')"><script>document.write(language.kongzhi)</script></li>
			<li class="fangke" onclick="show('fangke')"><script>document.write(language.fangke)</script></li>
			<!--<li class="zizhu" onclick="show('zizhu')"><script>document.write(language.zizhu)</script></li>-->
			<li class="weihu" onclick="show('weihu')"><script>document.write(language.weihu)</script></li>
			<!-- <li class="baobiao" onclick="show('baobiao')">报表</li> -->
			<li class="xitong" onclick="show('xitong')"><script>document.write(language.xitong)</script></li>
		</ul>
    </div>

    <div id="list">
		<ul id="kongzhi">
			<li style="line-height: 30px;">&nbsp;</li>
			<li class="kongzhi_yiban" onclick="ershow('kongzhi_yiban')"><script>document.write(language.kongzhi_yiban)</script></li>
			<li class="kongzhi_cheng" onclick="ershow('kongzhi_cheng')"><script>document.write(language.kongzhi_cheng)</script></li>
			<li class="kongzhi_gongcheng" onclick="ershow('kongzhi_gongcheng')"><script>document.write(language.kongzhi_gongcheng)</script></li>
			<li class="kongzhi_jie" onclick="ershow('kongzhi_jie')"><script>document.write(language.kongzhi_jie)</script></li>
		</ul>
		<ul id="fangke">
			<li style="line-height: 30px;">&nbsp;</li>
			<li class="fangke_yufang" onclick="ershow('fangke_yufang')"><script>document.write(language.fangke_yufang)</script></li>
            <li class="chengban_yucheng" onclick="ershow('chengban_yucheng')"><script>document.write(language.chengban_yucheng)</script></li>
		</ul>
		<ul id="zizhu">
			<li style="line-height: 30px;">&nbsp;</li>
            <li class="zizhu_yufang" onclick="ershow('zizhu_yufang')"><script>document.write(language.zizhu_yufang)</script></li>
            <li class="zizhu_yucheng" onclick="ershow('zizhu_yucheng')"><script>document.write(language.zizhu_yucheng)</script></li>
		</ul>
		<ul id="weihu">
			<li style="line-height: 30px;">&nbsp;</li>
			<li class="weihu_zuzhi" onclick="ershow('weihu_zuzhi')"><script>document.write(language.weihu_zuzhi)</script></li>
			<li class="weihu_changsuo" onclick="ershow('weihu_changsuo')"><script>document.write(language.weihu_changsuo)</script></li>
			<li class="weihu_fangke" onclick="ershow('weihu_fangke')"><script>document.write(language.weihu_fangke)</script></li>
			<li class="weihu_chengban" onclick="ershow('weihu_chengban')"><script>document.write(language.weihu_chengban)</script></li>
			<li class="weihu_shoufang" onclick="ershow('weihu_shoufang')"><script>document.write(language.weihu_shoufang)</script></li>
			<li class="weihu_yuangong" onclick="ershow('weihu_yuangong')"><script>document.write(language.weihu_yuangong)</script></li>
			<li class="weihu_jieyong" onclick="ershow('weihu_jieyong')"><script>document.write(language.weihu_jieyong)</script></li>
		</ul>
		<ul id="baobiao">
			<li style="line-height: 30px;">&nbsp;</li>
			<li class="baobiao_fangke" onclick="ershow('baobiao_fangke')"><script>document.write(language.baobiao_fangke)</script></li>
			<li class="baobiao_chengban" onclick="ershow('baobiao_chengban')"><script>document.write(language.baobiao_chengban)</script></li>
			<li class="baobiao_jieyong" onclick="ershow('baobiao_jieyong')"><script>document.write(language.baobiao_jieyong)</script></li>
		</ul>
		<ul id="xitong">
			<li style="line-height: 30px;">&nbsp;</li>
			<!-- <li class="xitong_dianyou" onclick="ershow('xitong_dianyou')">电邮服务器设置</li> -->
			<!-- <li class="xitong_duanxin" onclick="ershow('xitong_duanxin')">短信服务器设置</li> -->
			<!-- <li class="xitong_what" onclick="ershow('xitong_what')">WhatsAPP服务器设置</li> -->
			<!-- <li class="xitong_tiaoma" onclick="ershow('xitong_tiaoma')">条码/二维码设置</li> -->
			<li class="xitong_fangke" onclick="ershow('xitong_fangke')"><script>document.write(language.xitong_fangke)</script></li>
			<!-- <li class="xitong_mdm" onclick="ershow('xitong_mdm')">MDM 设置(第三方锁屏功能)</li> -->
			<!-- <li class="xitong_lun" onclick="ershow('xitong_lun')">多语种选择</li> -->
		</ul>
    </div>

	<div id="details">
		<iframe src=""></iframe>
	</div>
</body>
</html>